<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>users</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="app">
        <table class="table">
            <thead>
            <tr>
                <td class="active">序号</td>
                <td class="success">名字</td>
                <td class="warning">身份证</td>
                <td class="danger">年龄</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(user,index) in users" v-bind:key="index">
                <th>{{index+1}}</th>
                <th>{{user.name}}</th>
                <th>{{user.idNumber}}</th>
                <th>{{user.age}}</th>
            </tr>
            </tbody>
        </table>
<!--        <ul>-->
<!--            <li v-for="(user,index) in users" v-bind:key="index">-->
<!--                {{index+1}}&#45;&#45;{{user.name}}&#45;&#45;{{user.id_number}}&#45;&#45;{{user.age}}-->
<!--            </li>-->
<!--        </ul>-->
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
              users:[]
            },
            created(){
                axios.get("http://localhost:8080/userManagerment_war_exploded/find_all").then(res=>{
                    app.users=res.data;
                }).catch(err=>alert(err))
            }
        })
    </script>
</body>
</html>